<template>
  <div class="count-box"  v-if="goodsNum">
    <van-stepper :value="num || goodsNum" min="1" integer @change="onChange"/>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'CountBox',
  data () {
    return {
      timer: '',
      flag: false
    }
  },
  // 有props优先用props
  props: {
    num: {
      type: Number,
      default: undefined
    }
  },
  computed: {
    ...mapState('cart', ['goodsNum'])
  },
  methods: {
    onChange (value) {
      if (this.num) { // 这里用的是props的num，所以用this区分
        // 如果父组件有传递值，那么就告诉父组件更新后的数量
        console.log('abab  ' + value)
        // 节流500毫秒增加一次
        if (!this.flag) {
          setTimeout(() => {
            this.$emit('updateNum', value)
            this.flag = false
          }, 1000)
        }
        this.flag = true
        // 告诉父组件更新后的值，然后去发送请求更新
        return
      }
      // 如果父组件没有传递num，那么就用vuex的数据，也就是从商品详情页中点击加入购物车操作的
      this.$store.state.cart.goodsNum = value
    }
  }
}
</script>

<style>

</style>
